<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        
        .list {
            height: 50px;
            width: 700px;
            background: red;
            display: flex;
            border: 1px rgb(219, 219, 219) solid;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 20px;
        }
        
        .name {
            height: 50px;
            width: 80px;
            background: rgb(219, 219, 219);
            font-size: 18px;
            text-align: justify;
            text-align-last: justify;
            line-height: 50px;
            padding: 0 15px;
        }
        
        input {
            outline: none;
            border: none;
            width: 580px;
            font-size: 18px;
            padding-left: 20px;
        }
        
        table {
            border-collapse: collapse;
            margin-top: 50px;
        }
        
        td {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #000;
        }
        
        tr>td:nth-of-type(4) {
            width: 100px;
        }
        
        tr>td:nth-of-type(6) {
            width: 100px;
        }
        
        tr>td:nth-of-type(7) {
            width: 100px;
        }
        
        .chongzhi {
            border: 1px solid rgb(219, 219, 219);
            width: 150px;
            font-size: 18px;
            padding-left: 0;
            height: 38px;
            border-radius: 5px;
           
        }
        .chongzhi:hover{
            background-color: blue;
            color: white;
            cursor: pointer;
        }
        
        .baocun>button {
            border: 1px solid rgb(219, 219, 219);
            width: 150px;
            font-size: 18px;
            padding-left: 0;
            height: 38px;
            
            border-radius: 5px;
        }
        
        .baocun {
            margin-top: 30px;
        }
        .baocun>button:hover{
            background-color: blue;
            color: white;
            cursor: pointer;

        }
        
        #body .budui1 {
            border: rgb(184, 46, 46) solid 1px;
        }
        
        #body .budui2 {
            background: rgb(255, 97, 97);
            color: rgb(114, 0, 0);
        }
        
        #body .dui1 {
            border: rgb(97, 184, 46) solid 1px;
        }
        
        #body .dui2 {
            background: rgb(132, 185, 101);
            color: rgb(36, 95, 2);
        }
        
        .biaodan1 {
            position: absolute;
            top: 20px;
            left: 300px;
            background: white;
            display: none;
            margin-left: 300px;
        }
        
        .mask {
            background: rgba(0, 0, 0, 0.5);
            /* background: red; */
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .biaoge {
            margin-left: 300px;
            width: 700px;

        }
        
        .biaodan {
            margin-left: 300px;
        }
        p{
            font-size: 36px;
            font-weight: 600;
            text-align: center;
            line-height: 36px;
            margin-bottom: 50px;
            margin-top: 50px;
        }
        p>span{
            margin-left: 5px;
            font-size: 20px;
            font-weight: normal;
        }
       button[name="xiugai"]{
           background-color: green;
       }
       button[name="del"]{
           background-color: red;
       }
       .baocun2{
           display: flex;
           justify-content: flex-end;
       }
       .baocun2>button{
           margin-left: 5px;
           margin-bottom: 10px;
           margin-right: 10px;
       }
    </style>
</head>
<p>表单<span>Subtext for header</span></p>
<body id="body">
    <div class="mask"></div>
    <div class="biaodan">
        <div>
            <div class="list list1">
                <span class="name name1">姓名</span><input name="mingzi" class="shuru" type="text" placeholder="只能包含数字字母下划线，长度在8-16之间">
            </div>
            <div class="list list2">
                <span class="name name2">联系电话</span><input name="dianhua" class="shuru " type="text" placeholder="请输入11位电话号码">
            </div>
            <div class="list list3">
                <span class="name name3">学历</span><input name="xueli" class="shuru" type="text" placeholder="如果校验正确，绿色表示通过">
            </div>
            <div class="list list4">
                <span class="name name4">年龄</span><input name="nianling" class="shuru" type="text" placeholder="Amount">
            </div>
            <div class="list list5">
                <span class="name name5">期望薪资</span><input name="xinzi" class="shuru" type="text" placeholder="Amount">
            </div>
            <div class="baocun"> <button name="tj">保存</button> <input type="reset" class="chongzhi"></div>
        </div>
    </div>
    <div class="biaodan1">
        <div>
            <div class="list list1">
                <span class="name name1">姓名</span><input name="mingzi1" class="shuru1" type="text" placeholder="只能包含数字字母下划线，长度在8-16之间">
            </div>
            <div class="list list2">
                <span class="name name2">联系电话</span><input name="dianhua1" class="shuru1" type="text" placeholder="请输入11位电话号码">
            </div>
            <div class="list list3">
                <span class="name name3">学历</span><input name="xueli1" class="shuru1" type="text" placeholder="如果校验正确，绿色表示通过">
            </div>
            <div class="list list4">
                <span class="name name4">年龄</span><input name="nianling1" class="shuru1" type="text" placeholder="Amount">
            </div>
            <div class="list list5">
                <span class="name name5">期望薪资</span><input name="xinzi1" class="shuru1" type="text" placeholder="Amount">
            </div>
            <div class="baocun baocun2"> <button name="gb">关闭</button> <button name="bc">保存修改</button> </div>
        </div>
    </div>
    <div class="biaoge">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="a"></div>
    <script src="./jquery.min.js"></script>
    <script>
        setPage()
        $('[name="mingzi"]').blur(function() {
            let namezz1 = /^\w{8,16}$/
            let str = $('[name="mingzi"]').val()
            let name1 = namezz1.test(str)
                // let name2 = namezz2.test(str)
            if (!name1) {
                $('.list1').removeClass("dui1")
                $('.name1').removeClass("dui2")
                $('.list1').addClass("budui1")
                $('.name1').addClass("budui2")
            } else {
                $('.list1').removeClass("budui1")
                $('.name1').removeClass("budui2")
                $('.list1').addClass("dui1")
                $('.name1').addClass("dui2")
            }

        })
        $('[name="dianhua"]').blur(function() {
            let namezz1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            let str = $('[name="dianhua"]').val()
            let name1 = namezz1.test(str)
            if (!name1) {
                $('.list2').removeClass("dui1")
                $('.name2').removeClass("dui2")
                $('.list2').addClass("budui1")
                $('.name2').addClass("budui2")
            } else {
                $('.list2').removeClass("budui1")
                $('.name2').removeClass("budui2")
                $('.list2').addClass("dui1")
                $('.name2').addClass("dui2")
            }
        })
        $('[name="xueli"]').blur(function() {
            if (($('[name="xueli"]').val() === '')) {
                $('.list3').removeClass("dui1")
                $('.name3').removeClass("dui2")
                $('.list3').addClass("budui1")
                $('.name3').addClass("budui2")
            } else {
                $('.list3').removeClass("budui1")
                $('.name3').removeClass("budui2")
                $('.list3').addClass("dui1")
                $('.name3').addClass("dui2")
            }

        })
        $('[name="nianling"]').blur(function() {
            if (($('[name="nianling"]').val() === '')) {
                $('.list4').removeClass("dui1")
                $('.name4').removeClass("dui2")
                $('.list4').addClass("budui1")
                $('.name4').addClass("budui2")
            } else {
                $('.list4').removeClass("budui1")
                $('.name4').removeClass("budui2")
                $('.list4').addClass("dui1")
                $('.name4').addClass("dui2")
            }

        })
        $('[name="xinzi"]').blur(function() {
            if (($('[name="xinzi"]').val() === '')) {
                $('.list5').removeClass("dui1")
                $('.name5').removeClass("dui2")
                $('.list5').addClass("budui1")
                $('.name5').addClass("budui2")
            } else {
                $('.list5').removeClass("budui1")
                $('.name5').removeClass("budui2")
                $('.list5').addClass("dui1")
                $('.name5').addClass("dui2")
            }

        })
        $('[name="tj"]').click(function() {
            if ($('.list1').hasClass("budui1")) {
                window.alert('您输入的账号不符合规范')
                return
            }
            if ($('.list2').hasClass("budui1")) {
                window.alert('您输入的电话不符合规范')
                return
            }
            let bool = true
            $('.shuru').each(function() {
                if ($(this).val() === '') {
                    bool = false
                    return
                }
            })
            if (bool) {
                baocun()
            } else {
                window.alert('请您完整填写信息')
            }
        })
        $('[type="reset"]').click(function() {
            $('.shuru').val('')
        })
        let obj = {}
        let cc
        function baocun() {
            let shuju = window.localStorage.getItem('shuju')
            let mingzi = $('[name="mingzi"]').val()
            let dianhua = $('[name="dianhua"]').val()
            let xueli = $('[name="xueli"]').val()
            let nianling = $('[name="nianling"]').val()
            let xinzi = $('[name="xinzi"]').val()
            if (shuju === null) {
                obj.mingzi = mingzi.toString()
                obj.dianhua = dianhua.toString()
                obj.xueli = xueli.toString()
                obj.nianling = nianling.toString()
                obj.xinzi = xinzi.toString()
                console.log(obj)
                window.localStorage.setItem('shuju', JSON.stringify([obj]))
            } else {
                shuju = JSON.parse(shuju)
                if (shuju.length === 0) {
                    obj.mingzi = mingzi.toString()
                    obj.dianhua = dianhua.toString()
                    obj.xueli = xueli.toString()
                    obj.nianling = nianling.toString()
                    obj.xinzi = xinzi.toString()
                    console.log(obj)
                    shuju.unshift(JSON.stringify(obj))
                    window.localStorage.setItem('shuju', JSON.stringify([obj]))
                } else {
                    let bool = shuju.some(function(item) {
                        return item.mingzi === $('[name="mingzi"]').val()
                    })
                    if (bool) {
                        window.alert('用户名已存在')
                    } else {
                        obj.mingzi = mingzi.toString()
                        obj.dianhua = dianhua.toString()
                        obj.xueli = xueli.toString()
                        obj.nianling = nianling.toString()
                        obj.xinzi = xinzi.toString()
                        console.log(obj)
                        shuju.unshift(obj);
                        console.log(shuju)
                        window.localStorage.setItem('shuju', JSON.stringify(shuju))
                    }
                }
            }
            setPage()
        }
        $('body').click(function(e) {
            let shuju = JSON.parse(window.localStorage.getItem('shuju'))
            if (e.target.getAttribute('name') === 'del') {
                if(window.confirm('确定删除吗？？？')){
                for (let i = 0; i <= shuju.length - 1; i++) {

                    if (shuju[i].mingzi === e.target.getAttribute('index')) {

                        shuju.splice(i, 1);
                    }
                }
                window.localStorage.setItem('shuju', JSON.stringify(shuju))
                setPage()
            }else{
                return
            }
            }
            if (e.target.getAttribute('name') === 'xiugai') {
                $('.mask').css('display', 'block')
                $('.biaodan1').css('display', 'block')
                cc = e.target.getAttribute('index')
                console.log(cc)
            }
            if (e.target.getAttribute('name') === 'gb') {
                $('.mask').css('display', 'none')
                $('.biaodan1').css('display', 'none')
            }
            if (e.target.getAttribute('name') === 'bc') {
                
                let mingzi1 = $('[name="mingzi1"]').val()
                let dianhua1 = $('[name="dianhua1"]').val()
                let xueli1 = $('[name="xueli1"]').val()
                let nianling1 = $('[name="nianling1"]').val()
                let xinzi1 = $('[name="xinzi1"]').val()

                for (let i = 0; i <= shuju.length - 1; i++) {

                    if (shuju[i].mingzi === cc) {

                        shuju[i].mingzi = mingzi1
                        shuju[i].dianhua = dianhua1
                        shuju[i].xueli = xueli1
                        shuju[i].nianling = nianling1
                        shuju[i].xinzi = xinzi1

                    }
                }
                console.log(cc)
                console.log(shuju[0].mingzi)

                window.localStorage.setItem('shuju', JSON.stringify(shuju))
                setPage()
                $('.mask').css('display', 'none')
                $('.biaodan1').css('display', 'none')
            }
        })

        function setPage() {
            let shuju = window.localStorage.getItem('shuju');
            if (shuju === null) {
                $('tbody').html('');

            } else {
                shuju = JSON.parse(shuju);

                if (shuju.length === 0) {
                    $('.tbody').html('');
                } else {

                    let str = ''
                    shuju.forEach(function(item, key) {

                        str += `
                        <tr>
                            <td>${item.mingzi}</td>
                            <td>${item.dianhua}</td>
                            <td>${item.xueli}</td>
                            <td>${item.nianling}</td>
                            <td>${item.xinzi}</td>
                            <td><button index="${item.mingzi}" name="xiugai">修改</button></td>
                            <td><button index="${item.mingzi}" name="del">删除</button></td>
                            </tr>
                            `
                    })
                    $('tbody').html(str);
                }
            }
        }
    </script>
</body>

</html>